<template>
  <el-form ref="ruleForm" :model="formValue" :size="configData.formSize" :label-position="configData.labelPosition" :label-width="configData.labelWidth + 'px'" :inline="inline" :rules="rules" style="height: 100%;width: 100%;" class="demo-form-inline" @mouseenter="hover">
    <draggable :list="list" :options="dragOptions" :clone="clones" style="width: 100%;height: 100%;" >
      <div v-for="(item,index) in list" :key="index" :class="['list-box',{'list-block':item.block}]" >
        <el-col :span="Number(item.span)" >
          <el-form-item
            :label="item.label"
            :prop="item.name"
            :style="item.style"
            :class="[item.class,'v-form-item']"
          >
            <div class="item-li" @mouseenter="hover(hoverArr,index,true)" @mouseleave="hover(hoverArr,index,false)">

              <v-form-item ref="item" :item="item" :form="formValue" @submitForm="submitForm" />
              <div v-if="hoverArr[index] && setting" class="item-li-tool" >
                <span>
                  <i class="el-icon-setting" @click="settingEle(item,index)" />
                  <i class="el-icon-circle-close-outline" @click="delEle(index)" />
                </span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </div>
    </draggable>
  </el-form>
</template>
<script>
import draggable from 'vuedraggable'
import inputData from './Input.js'
import vFormItem from './formItem'
export default {
  name: 'XFrom',
  components: { draggable, vFormItem },
  props: {
    formData: {
      type: Array,
      default: null
    },
    inline: {
      type: Boolean,
      default: false
    },
    rules: {
      type: [Array, Object],
      default: null
    },
    draggable: {
      type: Object,
      default: null
    },
    formConfig: {
      type: Object,
      default: function(o) {
        return Object.assign({
          labelPosition: 'right',
          labelWidth: 100,
          formSize: 'medium'
        }, o)
      }
    }
  },
  data() {
    return {
      configData: this.formConfig,
      formValue: {},
      hoverArr: [],
      logID: null,
      change: false,
      setting: false
    }
  },
  computed: {
    dragOptions() {
      return this.draggable || { disabled: true }
    },
    list(o, a) {
      return this.formData
    }
  },
  watch: {
    list: {
      handler(o) {
        this.init(o)
      },
      deep: true
    },
    formValue: {
      handler(newName, oldName) {
        if (!this.change) return
        this.$emit('change', this.formValue)
      },
      deep: true
    }
  },
  created() {
    const event = this._events
    this.logID = this.$attrs.id
    event.change && (this.change = true)
    event.setting && (this.setting = true)
    this.init(this.formData)
  },
  methods: {
    log(...msg) {
      console.log(this.logID, '==', msg)
    },
    submitForm(item) {
      this.$refs.ruleForm.validate((valid, data) => {
        if (valid) {
          this.$emit('submitForm', this.formValue)
        } else {
          console.error('error submit!!')
          return false
        }
      })
    },
    hover(e, i, n) {
      if (!this.setting) return
      this.$set(e, i, n)
    },
    setData(list) {
      this.log('setData')
    },
    init(list) {
      console.log(list)
      if (!list) return
      const data = Array.isArray(list) ? list : [list]
      this.formValue = {}
      const setArrVal = el => {
        el.name && !this.formValue[el.name] && this.$set(this.formValue, el.name, el.category == 'checkbox' || el.category == 'cascader' ? [] : typeof (el.value) != 'undefined' ? el.value : '')
      }
      const lists = data.map(e => {
        if (Array.isArray(e)) {
          e.forEach(es => setArrVal(es))
        } else {
          setArrVal(e)
        }
        return Object.assign({}, inputData[e.category], e)
      })
      console.log('')
      return lists
    },
    edit(e) {
      this.list[e.i] = e.e
    },
    clones(e, o) {
      const genRandomString = len => {
        let rdmString = ''
        while (rdmString.length < len) {
          rdmString += (Math.random() * 37 | 0).toString()
        }
        return rdmString
      }
      const temps = Object.assign({}, inputData[e.name])
      temps.name = temps.name + '_' + genRandomString(8)
      this.log('temps==')
      this.log(temps)
      return temps
    },
    setConfig(e) {
      console.log('setConfig', e.e.block, this.list[e.i].block)
      this.list[e.i] = e.e
      this.init(this.list)
    },
    setFormConfig(e) {
      this.configData = e
    },
    settingEle(e, i) {
      this.$emit('setting', { e, i })
    },
    delEle(i) {
      this.list.splice(i, 1)
    }
  }
}
</script>
<style lang="scss">
  .v-form-item{
      width: 100%;
  }
</style>
<style lang="scss" scoped>
  .v-form-item{
      width: 100%;
      & > div{
         width: 100%;
      }
  }
  .item-li {
    display: flex;
    .item-li-tool {
      width: 80px;
      margin-left: 10px;
      cursor: Pointer;
      i {
        color: #188ae2;
      }
    }
  }
  .list-box{
    display: inline-block;
    width: 100%;
    &.list-block{
      display: block;
    }
  }

</style>
